<template>
    <div>
        <div style="display: flex;justify-content: space-between;">
            <a-button type='primary' @click="handleCreate" v-userAuth="'H1-2'" >
                <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                {{ $t('创建策略') }}
            </a-button>
            <div style="display: flex;">
                <div style="width: 80px;margin-top: 4px;">{{ $t('名称') }}：</div>
                <a-input v-model="input" :placeholder="$t('Enter') + $t('名称')" />
                <a-button type='primary' style="margin-left: 8px;" @click="handleSearch">
                    <Iconfont class="icon button-icon-style" type="icon-search16f"></Iconfont>
                    {{ $t('查询') }}
                </a-button>
            </div>
        </div>
        <a-table style="margin-top:16px" class="bigstyle" rowKey="id" :columns='columns' :loading="loading"
            :dataSource='dataList' :locale="defaultSetting" :pagination='pagination' size='small' :scroll="{ x: 1340 }">
            <template slot="state" slot-scope="state">
                <div v-if="state == '1'">
                    <span class="dot successBg"></span>
                    <span style="margin-left: 8px;">{{ $t('健康') }}</span>
                </div>
                <div v-if="state == '2'">
                    <span class="dot failBg"></span>
                    <span style="margin-left: 8px;">{{ $t('异常') }}</span>
                </div>
            </template>
            <!-- 策略计划 -->
            <template slot="plan" slot-scope='text, record'>
                <div>
                    <div>
                        <a-tag v-if="record.raw_cycle_type" style="opacity: 0.6;" :color="cycleTypeColor.get(record.raw_cycle_type)">{{
                            cycleType.get(record.raw_cycle_type) }}</a-tag>
                        <span v-if="Array.isArray(record.raw_cycles)">{{ record.raw_cycles.join(',') }}</span>
                    </div>
                    <!-- 时间段 -->
                    <div v-if="record.raw_time_type == '1'">
                        <span style="margin-right: 16px;" v-if="record.raw_start_time && record.raw_end_time">{{
                            record.raw_start_time }} - {{ record.raw_end_time }}</span>
                        <span v-if="record.raw_every_few_type == '1'">{{ $t('每') }}{{ record.raw_every_few
                        }}{{ $t('分钟') }}{{ $t('执行一次') }}</span>
                        <span v-if="record.raw_every_few_type == '2'">{{ $t('每') }}{{ record.raw_every_few
                        }}{{ $t('小时') }}{{ $t('执行一次') }}</span>
                    </div>
                    <!-- 时间点 -->
                    <div v-if="record.raw_time_type == '2'">{{ record.raw_time }}{{ $t('执行一次') }}</div>
                </div>
            </template>
            <template slot="reserve_count" slot-scope="reserve_count">
                <span>{{ $t('保留最近') }}{{ reserve_count }}{{ $t('个') }}</span>
            </template>
            <template slot="operate" slot-scope='text, record'>
                <div style="display: flex;" v-userAuth="'H1-2'">
                    <a-tooltip placement='top'>
                        <template slot='title'>
                            <span>{{ $t('Edit') }}</span>
                        </template>
                        <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="handleEdit(record)">
                        </Iconfont>
                    </a-tooltip>
                    <a-tooltip placement='top'>
                        <template slot='title'>
                            <span>{{ $t('Delete') }}</span>
                        </template>
                        <Iconfont class="icon table-operation-icon" type="icon-delete16f" @click="handleDelete(record.name, record.id)">
                        </Iconfont>
                    </a-tooltip>
                </div>
            </template>
        </a-table>

    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'

export default {
    components: { EmptyData },
    data() {
        return {
            loading: false,
            dataList: [],
            copyList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '15', '20', '25'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                { title: this.$t('策略名称'), dataIndex: 'name', key: 'name', width: 160, fixed: 'left' },
                { title: this.$t('策略描述'), dataIndex: 'describe', key: 'describe' },
                { title: this.$t('策略计划'), scopedSlots: { customRender: 'plan' } },
                { title: this.$t('保留计划'), dataIndex: 'reserve_count', width: 180, key: 'reserve_count', scopedSlots: { customRender: 'reserve_count' } },
                { title: this.$t('保护网关'), dataIndex: 'project_gateway_name', key: 'project_gateway_name', width: 180 },
                { title: this.$t('状态'), dataIndex: 'state', key: 'state', width: 180, scopedSlots: { customRender: 'state' } },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' },  width: 160, ellipsis: true, fixed: 'right' }
            ],
            input: '',
            cycleType: new Map([
                [1, "每日"],
                [2, "每周"],
                [3, "每月"],
            ]),
            cycleTypeColor: new Map([
                [1, "#006db8"],
                [2, "#059db3"],
                [3, "#6634b3"],
            ]),
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.data.getStrategyListApi({ strategy_type: 1, target_type: 2 })
            this.dataList = data
            this.copyList = data
            this.loading = false
        },
        handleSearch() {
            const list = []; // 用于存放搜索出来数据的新数组
            if (this.input) {
                this.copyList.filter((item) => {
                    if (item.name.indexOf(this.input) !== -1) {
                        list.push(item);
                    }
                });
                this.dataList = list;
            } else {
                this.dataList = this.copyList
            }
        },
        handleCreate() {
            localStorage.setItem('data_tab', 'file_snapshot');
            this.$router.push({ path: '/strategy_create', query: { strategy_type: 1 } })
        },
        handleEdit(item) {
            localStorage.setItem('data_tab', 'file_snapshot');
            this.$router.push({
                path: '/strategy_edit',
                query: {
                    item: encodeURIComponent(JSON.stringify(item)),
                    strategy_type: '1'
                }
            })
        },
        async handleDelete(name, id) {
            let _this = this
            this.loading = true
            this.$confirm({
                title: this.$t('删除定时快照计划'),
                content: this.$t('删除计划名为') + `${name}` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.data.deleteStrategyApi({ id, name })
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        }
    }
}
</script>
